<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html lang="zh">
<head>
    <title>onlineForum</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="bootstrap-3.3.5-dist/html5shiv.min.js"></script>
      <script src="bootstrap-3.3.5-dist/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="photos/favicon.ico"/>
    <link rel="bookmark" href="photos/favicon.ico"/>
    <style type="text/css">
        span{
            color: rgba(20,127,203,0.8);
        }
        .content-box{
            background:white; border-bottom:solid gray 1px;
        }
        .content-box-1{
            margin-left:-15px;margin-right:-15px;height:30px;line-height:30px;
        }
        .content-box-2{
            margin-left:-15px;margin-right:-15px;height:auto;
        }
        .content-brand{
            width:30px;height:30px;border-radius:30px;
        }
        .content-brand-name{
            display:inline;
        }
        .content-title{
            display:inline;margin-left:30px; font-weight:900;
        }
        .content-title-type{
            display:inline;float:right; margin-right:30px;
        }
        .content-ms{
            margin-left:30px; margin-right:30px;
        }
        .content-zan{
            display:inline; margin-left:30px;
        }
        .content-display{
            display:inline;
        }
    </style>
</head>
<body style="background:rgba(240,240,240,0.7)">
    
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 col-xs-12 col-md-offset-3 navbar-fixed-top" id="topNav" style="background-color:white; height:50px;border-bottom:blue solid 1px;">
            <div class="row">
             <div class="col-xs-10" style="text-align:center; line-height:50px;">
                 <div class="row">
                     <div class="col-xs-4"><a href="##" style="color:blue;" id="test">首页</a>
                     </div>
                     <div class="col-xs-4"><a href="##" style="color:gray;">JAVA</a>
                     </div>
                     <div class="col-xs-4"><a href="##" style="color:gray;">JAVAWEB</a>
                     </div>
                 </div>
             </div>
             <div class="col-xs-2" style="text-align:center; cursor:pointer; line-height:50px;"><span class="glyphicon glyphicon-th-large"></span></div>
            </div>
        </div>
          
        <!--
        -->
          <!--抵消上方的50px-->
          <div style="width:100%;height:50px;"></div>
          
          
        <div class="col-md-6 col-xs-12 col-md-offset-3">
          
            <div class="row" id="content">
<!--             center content -->
<!--               <div class="col-xs-12 content-box"> -->
<!--                   <div class="content-box-1"> -->
<!--                       头像 -->
<!--                       <img src="photos/arg0.jpg" class="content-brand"> -->
<!--                       <strong class="content-brand-name">作者姓名arg1</strong> -->
<!--                   </div> -->
<!--                       帖子主题 -->
<!--                   <div class="content-box-1"> -->
<!--                     <h4 class="content-title">帖子主题arg2</h4> -->
<!--                     <p class="content-title-type">分类arg3</p> -->
<!--                   </div> -->
<!--                       帖子摘要 -->
<!--                   <div class="content-box-2"> -->
<!--                       这里要有一个帖子forumId -->
<!--                       <div class="content-ms" onclick="cardMain(arg4)"> -->
<!--                           <p>arg5</p> -->
<!--                       </div> -->
<!--                   </div> -->
<!--                   <div class="content-box-2"> -->
<!--                       <a href="arg6" class="content-zan">赞3arg7</a><strong class="content-display"> / </strong><a  href="arg8" class="content-display">评论4arg9</a> -->
<!--                   </div> -->
<!--               </div>  -->
            <!--清楚加载出来的浮动-->
            <div></div>
                
            <!-- center content end-->
                
            </div>
            
            <!--清除空白的地方 50px-->
          <div style="width:100%;height:50px;"></div>
        </div>
        
        <!--content ending-->
          
        
        <div class="navbar-fixed-bottom" style="z-index:9999; margin-bottom:60px; width:26px; height:26px;text-align:center;line-height:26px; cursor:pointer;"><span id="addCard" class="glyphicon glyphicon-search" style="color:red" onclick="searchCard()"></span></div>
          
        <footer class="col-md-6 col-xs-12 col-md-offset-3 navbar-fixed-bottom" style="background:white; height:50px;text-align:center;line-height:50px;border-top:gray solid 1px;">
          <div class="row">
              <div class="col-xs-3"> 
                <a href="##">
                <span class="glyphicon glyphicon-home"></span></a>
              </div>
              <div class="col-xs-3" onclick="openSendCard()">
                <a href="##">
                  <span class="glyphicon glyphicon-plus"></span></a>
              </div>
              <div class="col-xs-3">
                  <a href="##">
                  <span class="glyphicon glyphicon-envelope"></span></a>
              </div>
              <div class="col-xs-3">
                  <a href="own">
                  <span class="glyphicon glyphicon-user" style="color:green;"></span></a>
              </div>
          </div>
        </footer>
      </div>
    </div>
    
    
    <script src="jquery/jquery-3.0.0.min.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">

		var pg = 0;
    	loadCardsList(pg);
    	

        function openSendCard(){
        	window.location.href="sendCard.jsp";
        }

        function searchCard(){
        	window.location.href="search.jsp";
        }
    
    	var loadNewCard = true;
        
    	function loadCardsList(ps){
    		//if(loadNewCard){
    			

    	    	var st = "pages="+parseInt(ps)+"&showNumber=10";
    	    	var xmlhttp;
    	    	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    	      		xmlhttp=new XMLHttpRequest();
    	      	}
    	    	else{// code for IE6, IE5
    	      		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	      	}
    	    	
    	    	xmlhttp.onreadystatechange=function(){
    		      	if (xmlhttp.readyState==4 && xmlhttp.status==200){
    		        	var str = xmlhttp.responseText;
    		        	//alert(str);
    		        	if(str == "]"){
    		        		$("#content").children().last().append("<span style=\"margin:0 auto;\">哇塞 暂时没有新帖子啦 <a href=\"sendCard.jsp\">我要发帖</a></span>");
    		        		loadNewCard = false;
    		        	}
    		        	else{
    		        		if(loadNewCard){

    				        	var json = jsonData(str);

    				        	
    				        	for(var i = 0; i<getHsonLength(json);i++){
    				        		//alert(decodeURI(json[i].arg5));
    				        		loadData(json[i].arg0,json[i].arg1,json[i].arg2,json[i].arg3,json[i].arg4,json[i].arg5,json[i].arg6,json[i].arg7,json[i].arg8,json[i].arg9); 
    				        	}
    		        		}
    			        	
    		        	}
    		        }
    	      	}
    	    	
    	    	xmlhttp.open("POST","cardsList",true);
    	    	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    	    	//if(loadNewCard)
	    	    	xmlhttp.send(st);
    			
    			
    			
    		//}
    	}
    
    
        //var str="简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容简要内容";
        
        function getHsonLength(json){
        	var jsonLength=0;
            for (var i in json) {
            	jsonLength++;
            }
            return jsonLength;
        }
        
        
        function jsonData(str){
            return JSON.parse(str);
        }
        
        
        $(window.document).scroll(function(){
            var scrolltop = $(document).scrollTop();
            //$("#test").innerHTML = $(document).scrollTop()+"";
            //alert(scrolltop);
            //滚动条到达底部触发刷新
            if (scrolltop >= $(document).height() - $(window).height()) {
                
                //从后台拿来的json数组数据
                pg = pg+1;
                loadCardsList(pg);
                
            }
        });
        
                
        function loadData(arg0,arg1,arg2,arg3,arg4,arg5,arg6,arg7,arg8,arg9){
            //var va = $("#content").children().last();
            
            var ct = " <div class=\"col-xs-12 content-box\">" ;
            ct += "      <div class=\"content-box-1\">" ;
            ct += "          <img src=\"photos/"+arg0+".jpg\" class=\"content-brand\">" ;
            ct += "          <strong class=\"content-brand-name\">"+arg1+"</strong>" ;
            ct += "      </div>" ;
            ct += "      <div class=\"content-box-1\">" ;
            ct += "        <h4 class=\"content-title\">"+"主题: "+arg2+"</h4>" ;
            ct += "        <p class=\"content-title-type\">"+arg3+"</p>" ;
            ct += "      </div>" ;
            ct += "      <div class=\"content-box-2\">" ;
            ct += "          <div class=\"content-ms\" onclick=\"cardMain("+arg4+")\">" ;
            ct += "             <div style=\"word-wrap: break-word; word-break: normal;\">"+arg5+"</div>" ;
            ct += "          </div>" ;
            ct += "      </div>" ;
            ct += "      <div class=\"content-box-2\">" ;
            ct += "          <a href=\"javascript:\" onclick=\""+"userZan('"+arg6+"')\" class=\"content-zan\">"+arg7+"</a><strong class=\"content-display\"> / </strong><a  href=\""+"javascript:"+"\" onclick=\"cardMain("+arg4+")\" class=\"content-display\">"+arg9+"</a>" ;
            ct += "      </div>" ;
            ct += "  </div>          " ;
            ct += "<div></div>";
            $("#content").children().last().append(ct);
        }
        
        
        //打开帖子详情
        function cardMain(va){
        	window.location.href="openCard?forumId="+va;
        	//alert(va);
        }
        //userzan
        
        var zanFlag = true;
        
        function userZan(va){
        	if(zanFlag){
        		var st = va.split(" ");
            	
            	var xmlhttp;
    	    	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    	      		xmlhttp=new XMLHttpRequest();
    	      	}
    	    	else{// code for IE6, IE5
    	      		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	      	}
    	    	
    	    	xmlhttp.onreadystatechange=function(){
    		      	if (xmlhttp.readyState==4 && xmlhttp.status==200){
    		        	var str = xmlhttp.responseText;
    	                
    		        }
    	      	}
    	    	
    	    	xmlhttp.open("POST","userZan",true);
    	    	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    	    	xmlhttp.send("forumId="+st[0]+"&uid="+st[1]);
        		zanFlag = true;
        	}
        	else{
        		alert("你已经点过赞咯~~");
        	}
        	
        	
        	
        }
        
        //添加按钮的位置
        changeAddCardLocation();
        $(window).resize(function(){
            changeAddCardLocation();
        });
        function changeAddCardLocation(){
            var width = $(this).width();
            if(width > 767){
                width = $("#topNav").width();
                width = width/2+width;
            }
            
            $("#addCard").css("margin-left",parseInt(width)-40+"px");
        }
        
        
        
    </script>
</body>
</html>